<template>
	<view class="container">
		<view class="header-wrap">
			<view class="header">
				<view class="current">
					<view class="mb-30">当前人人豆</view>
					<view class="value">{{userInfo.beans}}</view>
				</view>
				<view>
					<button type="info" @tap="jump('/pages/balance/balance')"> <image style="width: 50rpx;height: 50rpx;vertical-align: middle;" src="../../static/beans.png"></image> 充值</button>
				</view>
			</view>
			<u-tabs bg-color="#ffffff" inactive-color="#999" name="tab_name" :list="tabs" active-color="#616161"
				:is-scroll="false" :current="current" @change="tabChange"></u-tabs>
		</view>
		<view class="flex-fill overflow-hidden">
			<scroll-view @scrolltolower="lowerBottom" class="content" scroll-y>
				<view class="tasks" v-if="current==0">
					<view class="tasks-section">
						<view class="header">
							<view class="title">日常任务</view>
						</view>
						<list-cell v-for="(task, index) in daysTasks" :key="index">
							<view class="task">
								<view class="content">
									<view class="desc">{{ task.desc }}</view>
									<view class="integral">
										<view class="text">人人豆</view>
										<view class="value">+{{ task.value }}</view>
									</view>
								</view>
								<view class="action">
									<button @tap="taskAction('days', index)" :type="!task.is_completed ? 'primary' : 'default'"
											:disabled="task.is_completed ? true : false" size="mini">
											{{task.is_completed?task.has:task.no}}
									</button>
								</view>
							</view>
						</list-cell>
					</view>
					<view class="tasks-section">
						<view class="header">
							<view class="title">奖励任务</view>
						</view>
						<list-cell v-for="(task, index) in rewardTasks" :key="index">
							<view class="task">
								<view class="content">
									<view class="desc">{{ task.desc }}</view>
									<view class="integral">
										<view class="text">人人豆</view>
										<view class="value">+{{ task.value }}</view>
									</view>
								</view>
								<view class="action">
									<button @tap="taskAction('reward', index)" :type="!task.is_completed ? 'primary' : 'default'"
											:disabled="task.is_completed ? true : false" size="mini">
											{{task.is_completed?task.has:task.no}}
									</button>
								</view>
							</view>
						</list-cell>
					</view>
					<view class="tasks-section">
						<view class="header">
							<view class="title">新人任务</view>
						</view>
						<list-cell v-for="(task, index) in newUserTasks" :key="index">
							<view class="task">
								<view class="content">
									<view class="desc">{{ task.desc }}</view>
									<view class="integral">
										<view class="text">人人豆</view>
										<view class="value">+{{ task.value }}</view>
									</view>
								</view>
								<view class="action">
									<button :type="!task.is_completed ? 'primary' : 'default'"
											:disabled="task.is_completed ? true : false" size="mini">
											{{task.is_completed?task.has:task.no}}
									</button>
								</view>
							</view>
						</list-cell>
					</view>
				</view>
				<view class="card" v-if="current==1">
					<view class="card-body">
						<view class="row">
							<view class="title">
								<view>发布约拍信息</view>
							</view>
							<view class="subtitle">-5</view>
						</view>
						<view class="row">
							<view class="title">
								<view>发布通告信息</view>
							</view>
							<view class="subtitle">-5</view>
						</view>
						<view class="row">
							<view class="title">刷新约拍信息</view>
							<view class="subtitle">-2</view>
						</view>
						<view class="row">
							<view class="title">提交约拍/联系请求</view>
							<view class="subtitle">-2</view>
						</view>
						<view class="row">
							<view class="title">
								<view>查看约拍/联系请求联系方式</view>
								<!-- <view class="badge primary">特权</view> -->
							</view>
							<view class="subtitle">-1</view>
						</view>
					</view>
				</view>
				<view class="records" v-if="current==2">
					<list-cell v-for="(record, index) in records" :key="index" hover :last="index==records.length?true:false">
						<view class="score">
							<view class="left">
								<view class="title mb-10">{{ record.remarks }}</view>
								<view>{{ record.created_at }}</view>
							</view>
							<view class="right">{{ record.nums>0?'+'+record.nums:'-'+record.nums }}</view>
						</view>
					</list-cell>
					
					<view style="padding: 30rpx 0 60rpx 0;background-color: #F8F8F8;">
						<u-loadmore :status="loadStatus" />
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations } from 'vuex'
	import listCell from '@/components/list-cell/list-cell.vue'
	export default {
		components: {
			listCell
		},
		computed:{
			...mapState(['userInfo']),
		},
		data() {
			return {
				scores: [],
				tabs: [{tab_name: '获得人人豆'}, {tab_name: '人人豆用途'},{tab_name: '人人豆记录'}],
				current: 0,
				daysTasks: [
					{ desc: '每日签到', value: 1, is_completed: false, no:'去签到', has:'已签到'},
					{ desc: '邀请好友', value: 3, is_completed: false, no:'去邀请', has:'已邀请' }
				],
				rewardTasks: [
					{ desc: '关注"人人约拍"公众号', value: 10, is_completed: false, no:'去关注', has:'已关注' },
					{ desc: '完成实名认证', value: 20, is_completed: false, no:'去实名', has:'已认证' }
				],
				newUserTasks: [
					{ desc: '完善资料', value: 2, is_completed: false, no:'去完善', has:'已完善' },
					{ desc: '绑定联系方式', value: 5, is_completed: false, no:'去绑定', has:'已绑定' }
				],
				records:[],
				loadStatus:'loading',
				page:1
			}
		},
		onReady() {
			this.newUserTasks[0].is_completed = this.userInfo.is_perfect ? true : false;
			this.newUserTasks[1].is_completed = this.userInfo.mobile ? true : false;
			
			this.rewardTasks[0].is_completed = false;
			this.rewardTasks[1].is_completed = this.userInfo.is_cert ? true : false;
		},
		methods:{
			...mapMutations(['setUserInfo']),
			async tabChange(index) {
				this.current = index;
				
				if(index==2) {
					this.getBeansRecord();
				}
			},
			taskAction(type, index) {
				if(type=='days') {
					if(index==0) {
						this.todaySign();
					}
				}else if(type=='reward') {
					if(index==1) {
						uni.navigateTo({
							url:"/pages/my/cert"
						})
					}
				}
			},
			todaySign() {
				uni.showLoading({
					mask: true,
					title: '签到中...'
				});
				let userInfo = this.userInfo;
				userInfo.beans = Number(userInfo.beans) + 1;
				uni.setStorageSync("userInfo", userInfo)
				this.setUserInfo(userInfo);
				this.daysTasks[0].is_completed = true;
				uni.hideLoading();
			},
			async getBeansRecord() {
				this.loadStatus = 'loading';
				let res = await this.$api('beansRecord')
				this.records = this.records.concat(res.data.list);
				if (this.page === res.data.total_pages || res.data.total_pages === 0) {
					this.loadStatus = 'nomore';
				} else {
					this.loadStatus = 'loadmore';
				}
			},
			lowerBottom() {
				if(this.current === 2) {
					if(this.loadStatus!='nomore') {
						this.page++;
						this.loadStatus = 'loading'
						this.getBeansRecord();
					}
				}
			},
			jump(url) {
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}
	
	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.header-wrap {
		margin-bottom: 20rpx;
		
		.header {
			background-color: $bg-color-white;
			width: 100%;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 40rpx;
			font-size: $font-size-medium;
			color: $text-color-base;
			
			
			.value {
				font-size: 64rpx;
				color: $color-primary;
				font-weight: 500;
				margin-bottom: 30rpx;
			}
			
			.rules {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				
				.rules-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	
	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		
		.top {
			padding: 20rpx 30rpx;
			font-size: $font-size-lg;
			font-weight: 500;
		}
		
		.score {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: $font-size-sm;
				color: $text-color-assist;
				
				.title {
					font-size: $font-size-lg;
					color: $text-color-base;
					margin-bottom: 10rpx;
				}
			}
			
			.right {
				font-size: $font-size-lg;
				color: $color-primary;
			}
		}
	}
	
	.tasks-section {
		background-color: $bg-color-white;
		margin-bottom: 20rpx;
	
		.header {
			display: flex;
			padding: 30rpx;
	
			.title {
				font-size: $font-size-lg;
				color: $font-size-base;
				font-weight: 500;
				margin-right: 20rpx;
			}
	
			.subtitle {
				font-size: $font-size-sm;
				color: $text-color-assist;
			}
		}
	
		.task {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.content {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
	
				.desc {
					font-size: $font-size-medium;
					font-weight: 500;
					color: $text-color-base;
					margin-bottom: 10rpx;
				}
	
				.integral {
					display: flex;
					align-items: center;
					font-size: $font-size-sm;
	
					.text {
						color: $text-color-assist;
					}
	
					.value {
						color: $color-primary;
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}
	
			.action {
				flex-shrink: 0;
				
				button {
					border-radius: 50rem !important;
					font-size: $font-size-sm;
	
					&.button-hover {
						opacity: 0.6;
					}
				}
	
				.completed-img {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
	}
	.records {
		background-color: #ffffff;
	}
	
	.card {
		width: 100%;
		background-color: $bg-color-white;
		padding: 0rpx 40rpx;
		margin-bottom: 20rpx;
		
		.card-title {
			display: flex;
			align-items: baseline;
			margin-bottom: 20rpx;
			
			.title {
				font-family: 'wenyue';
				font-size: $font-size-lg;
				font-weight: 500;
			}
			
			.subtitle {
				margin-left: 20rpx;
				font-size: $font-size-base;
				color: $text-color-assist;
			}
		}
		
		.row {
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			font-size: $font-size-medium;
			border-bottom: 2rpx solid #F8F8F8;
			
			.title {
				display: flex;
				align-items: center;
				
				.badge {
					position: relative;
					margin-top: -40rpx;
					margin-left: 6rpx;
					color: #FFFFFF;
					font-size: 20rpx;
					line-height: 1rem;
					padding: 0 16rpx;
					border-radius: 50rem 50rem 50rem 0;
					
					&.danger {
						background-color: #d36661;
					}
					
					&.primary {
						background-color: $color-primary;
					}
				}
			}
			
			.subtitle {
				color: $color-primary;
				font-weight: 500;
			}
		}
		.row:last-child {
			border-bottom: none;
		}
		.footer {
			padding: 20rpx 0 0;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: $font-size-sm;
			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
</style>
